<template>
    <el-card class="mt16">
        <el-table :data="rightsArr" border>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="路径" prop="path"></el-table-column>
            <el-table-column label="权限等级">
                <template #default="scope">
                    <div>
                        <el-tag :type="typeObj[scope.row.level]">{{ rank(scope.row.level) }}</el-tag>
                    </div>
                </template>
            </el-table-column>

        </el-table>

    </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { getRightListApi } from '@/http/api'

onMounted(() => {
    //加载权限列表
    getRightsList()
})


type ItypeObj = {
    [i: string]: string;
}
let typeObj: ItypeObj = reactive({
    '0': '',
    '1': 'success',
    '2': 'warning'
})

//权限数组
interface IRightsItem {
    "id": number,
    "authName": string,
    "level": string,
    "pid": number,
    "path": string
}
const rightsArr = ref<IRightsItem[]>([])
const getRightsList = async () => {
    //调接口
    const res = await getRightListApi()
    console.log('所有权限111：', res)
    rightsArr.value = res.data;
}

</script>

<style scoped>
@import "@/assets/public.css"
</style>